<template>
    <div class="ddreports-container">
      <!-- 头部导航栏 -->
      <div class="header">
        <button class="back-button" @click="goBack">
          <i class="arrow-left">←</i>
        </button>
        <h2>虫害检测报告</h2>
      </div>
  
      <!-- 内容区域 -->
      <div class="content">
        <!-- 封面标题 -->
        <h3>一年内农作物虫害评估及趋势分析（截止2025年4月）</h3>
  
        <!-- 表格数据 -->
        <div class="table-container">
          <p>一年内检测到的农作物虫害数据表如下：</p>
          <table>
            <thead>
              <tr>
                <th>月份</th>
                <th>缺刻</th>
                <th>失绿</th>
                <th>卷叶</th>
                <th>合计</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>2024年 5月</td>
                <td>20</td>
                <td>2</td>
                <td>8</td>
                <td>30</td>
              </tr>
              <tr>
                <td>2024年 6月</td>
                <td>270</td>
                <td>20</td>
                <td>10</td>
                <td>300</td>
              </tr>
              <tr>
                <td>2024年 7月</td>
                <td>390</td>
                <td>110</td>
                <td>15</td>
                <td>415</td>
              </tr>
              <tr>
                <td>2024年 8月</td>
                <td>150</td>
                <td>150</td>
                <td>10</td>
                <td>310</td>
              </tr>
              <tr>
                <td>2024年 9月</td>
                <td>90</td>
                <td>110</td>
                <td>5</td>
                <td>205</td>
              </tr>
              <tr>
                <td>2024年 10月</td>
                <td>50</td>
                <td>3</td>
                <td>3</td>
                <td>56</td>
              </tr>
              <tr>
                <td>2024年 11月</td>
                <td>10</td>
                <td>4</td>
                <td>2</td>
                <td>16</td>
              </tr>
              <tr> 
                <td>2024年 12月</td>
                <td>3</td>
                <td>1</td>
                <td>1</td>
                <td>5</td>
              </tr>
              <tr>
                <td>2025年 1月</td>
                <td>2</td>
                <td>0</td>
                <td>1</td>
                <td>3</td>
              </tr>
              <tr>
                <td>2025年 2月</td>
                <td>4</td>
                <td>1</td>
                <td>0</td>
                <td>5</td>
              </tr>
              <tr>
                <td>2025年 3月</td>
                <td>5</td>
                <td>3</td>
                <td>2</td>
                <td>10</td>
              </tr>
              <tr>
                <td>2025年 4月</td>
                <td>50</td>
                <td>2</td>
                <td>5</td>
                <td>57</td>
              </tr>
            </tbody>
          </table>
        </div>
  
        <!-- 折线图区域 -->
        <div class="chart-container">
          <h4>农作物虫害数量分析的折线图：</h4>
          <img src="@/assets/images/start-page/binghai.png" alt="农作物病害数量分析的折线图" class="chart-image">
        </div>
  
        <!-- 结论分析 -->
        <div class="analysis-container">
          <h2 style="text-align: center;">结论分析</h2>
           <p>一、整体趋势分析</p>
        <p>1. 虫害总数趋势：从数据整体来看，2024年5 - 8月农作物虫害数量较多，处于高发期，之后逐渐减少，在2025年1 - 3月维持在较低水平 ，4月又有所上升。这可能与农作物生长季节以及害虫的繁殖周期相关，一般春夏季节温度适宜，害虫繁殖活跃，而秋冬气温降低，害虫活动减弱。</p>
        <p>2. 不同虫害类型趋势</p>
        <p>    - 缺刻：缺刻现象在2024年6 - 7月达到高峰，随后逐渐下降，在冬季保持极低水平，2025年4月有所回升。说明造成缺刻的咀嚼式口器害虫在夏季繁殖和活动最为频繁。</p>
        <p>    - 失绿：失绿情况在2024年7 - 8月较为严重，之后下降明显，冬季处于低发状态，2025年4月略有波动。表明引发失绿的刺吸式口器害虫活动高峰期也集中在夏季。 </p>
        <p>    - 卷叶：卷叶现象在2024年5 - 7月相对较多，之后逐步减少，冬季较少发生，2025年4月有少量增加。意味着导致卷叶的害虫活动规律类似，也是在夏季较为活跃。 </p>
        <p>二、各虫害类型占比分析</p>
        <p>1. 高发期占比（2024年6 - 8月）</p>
        <p>    - 2024年6月：缺刻占比约为270÷300×100% = 90% ；失绿占比约为20÷300×100% ≈ 6.67% ；卷叶占比约为10÷300×100% ≈ 3.33% 。此月缺刻现象占绝对主导。</p>
        <p>    - 2024年7月：缺刻占比约为390÷415×100% ≈ 94% ；失绿占比约为110÷415×100% ≈ 26.51% ；卷叶占比约为15÷415×100% ≈ 3.61% 。缺刻仍占主导，但失绿现象也较为突出。</p>
        <p>    - 2024年8月：缺刻占比约为150÷310×100% ≈ 48.39% ；失绿占比约为150÷310×100% ≈ 48.39% ；卷叶占比约为10÷310×100% ≈ 3.23% 。该月缺刻和失绿占比相近且较高。</p>
        <p>2. 低发期占比（2024年12月 - 2025年3月）：这几个月各类虫害发生数量都较少，缺刻在大部分月份相对占比稍高，但总体差异不大，说明冬季虫害活动受到极大抑制。</p>
        <p>三、数据波动原因推测</p>
        <p>1. 气候因素：夏季气温高、降水适宜，为害虫繁殖和生长提供了良好环境，导致虫害高发；冬季寒冷，害虫进入越冬状态，活动减弱，虫害减少。 </p>
        <p>2. 农作物生长阶段：农作物不同生长阶段对害虫的吸引力不同。例如在生长旺盛期，植株营养丰富，可能更容易吸引害虫，导致虫害发生数量增加。</p>
        <p>3. 防治措施影响：可能在虫害高发期采取了相应防治措施，如喷洒农药、生物防治等，使得后续虫害数量有所下降。但随着时间推移，部分害虫产生抗药性或防治措施效果减弱，虫害数量又有所波动。</p>
        <p>四、建议</p>
        <p>1. 监测预警：根据虫害发生规律，在每年5 - 8月重点加强对农作物虫害的监测，尤其是对缺刻和失绿现象的关注，及时发布预警信息。</p>
        <p>2. 综合防治：在虫害高发前，提前采取农业防治（如合理轮作、清除杂草）、物理防治（如设置诱虫灯）、生物防治（如释放天敌昆虫）等综合措施，减少害虫基数，降低化学农药使用量。 </p>
        <p>3. 抗虫品种选育：考虑选育和推广对造成缺刻、失绿、卷叶等现象害虫具有抗性的农作物品种，从根源上减轻虫害影响。 </p>
    
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Ddreports',
    methods: {
      goBack() {
        // 返回上一页的逻辑，根据具体应用场景可以修改
        this.$router.go(-1);
      }
    }
  };
  </script>
  
  <style scoped>
  /* 全局样式 */
  .ddreports-container {
    padding: 20px;
    font-size: 16px;
    color: #333;
    background-color: #fff;
  }
  
  /* 头部导航栏 */
  .header {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;
    margin-bottom: 20px;
  }
  
  .back-button {
    background-color: transparent;
    border: none;
    color: #556b2f;
    font-size: 20px;
    cursor: pointer;
    margin-right: 10px;
  }
  
  h2 {
    color: #556b2f;
    margin: 0;
    /* margin-right: 50px;  向右移动一点 */
    flex-grow: 1; 
    text-align: center;
  }
  
  
  /* 内容区域 */
  .content {
    max-width: 600px;
    margin: 0 auto;
  }
  
  /* 表格样式 */
  .table-container {
    margin: 20px 0;
    background-color: #f0f8ff; 
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .table-container table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .table-container th,
  .table-container td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }
  
  .table-container th {
    background-color: #4caf50;
    color: white;
  }
  
  /* 折线图样式 */
  .chart-container {
    margin: 20px 0;
    text-align: center;
  }
  
  .chart-image {
    width: 100%;
    height: auto;
    max-height: 400px; /* 根据需要调整 */
  }
  
  /* 分析区域 */
  .analysis-container {
    padding: 20px;
    background-color: #f0f8ff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* 响应式布局 */
  @media (max-width: 600px) {
    .content {
      max-width: 100%;
    }
  
    .chart-image {
      max-height: 300px; /* 根据需要调整 */
    }
  }
  .analysis-container h2 {
  text-align: center;
}
  </style>
  